<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :default="'123'"
    >
      <van-cell v-for="item in renderList" :key="item.id" class="houseitem" @click="godetail(item.houseCode)">
        <div class="houseitem-content">
          <div class="houseImg">
            <img :src="'http://liufusong.top:8080' + item.houseImg" alt="" />
          </div>
          <div>
            <p class="houseitem-title">{{ item.title }}</p>
            <p class="houseitem-desc">{{ item.desc }}</p>
            <p class="houseitem-tags">
              <span v-for="val in item.tags" :key="val" class="tags-span"
                >{{ val }}
              </span>
            </p>
            <p class="houseitem-price">
              <span class="price-text">{{ item.price }}</span>元/月
            </p>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { nextTick } from 'vue'
export default {
  name: 'HouseList',
  props: {
    renderList: {
      type: [Object, Array, null, String],
      require: true,
      default: () => {
        ;[]
      },
    },
  },
  data() {
    return {
      loading: false,
      finished: false,
    }
  },
  methods: {
    async onLoad() {
      // 异步更新数据
      // this.loading=false
      this.$emit('requestApi')
      // 加载状态结束
      this.loading = false
      this.finished = false
      this.$nextTick(()=>{
        this.finished = true
      })
      // 数据全部加载完成
    },
    godetail(code){
      this.$router.push(`/detail/${code}`)
    }
  },
}
</script>

<style scoped lang="less">
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.houseitem {
  width: 355px;
  height: 120px;
  // background-color: #087;
  padding: 0;
  border: 1px solid rgba(red, green, blue, 0);
  margin: 0 auto;
  padding-top: 20px;

  // align-content: center;
  .houseitem-content {
    display: flex;
    // justify-content: center;
    align-content: center;
    .houseitem-title {
      font-weight: 700;
      font-size: 15px;
      color: #000;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 22px;
    }
    .houseitem-desc {
      height: 22px;
      color: #afb2b3;
      font-size: 12px;
    }
    .houseitem-tags {
      display: flex;

      .tags-span {
        color: #39becd;
        background-color: #e1f5f8;
        font-size: 12px;
        height: 22px;
        display: block;
        box-sizing: none;
        padding: 0 2px;
        border-radius: 3px;
      }
    }
    .houseitem-price{
      font-weight: 700;
      color: #fa5741;
      font-size: 12px;
    .price-text{
      font-size: 16px;
      margin-right: 3px;
    }
    }
  }
  .houseImg {
    width: 106px;
    height: 80px !important;
    margin-right: 10px;
    img {
      height: 80px;
      width: 106px;
    }
  }
}
</style>
